<template>
  <button :class="classes" :style="styles" v-bind="$attrs" v-on="$listeners"><slot/></button>
</template>

<script>
export default {
  props: {
    type: {
        type:String,
        default:'primy'
    },
    round: Boolean,
    radius: {
      type: Number,
      default: 0
    },
    width: String
  },
  computed: {
    classes() {
      return [
        "custom_button",
        { [`custom_button_${this.type}`]: this.type },
        { [`custom_button_round`]: this.round }
      ];
    },
    styles() {
      let style = {
        borderRadius: this.radius + "px"
      };
      if(this.width){
          style.width = this.width
      } 
      return style;
    }
  }
};
</script>

<style lang="scss" scoped>
.custom_button {
  padding: 12px;
  background: none;
  border: none;
  border: 1px solid $opBorderColor;
  border-radius: 4px;
  color:$beforeColor;
  font-size: 15px;
}
.custom_button_round {
  border-radius: 50%;
}
.custom_button_hight{
    background: $beforeColor;
    color: $afterColor;
}
.custom_button_trans{
    color: $beforeColor;
    background: $afterColor;
}
</style>